<template>
    <view class="page">
        <comHead :datas="datasObj"> <template #headerContent> </template>
        </comHead>
        <view class="content_box pd-30">
            <view class="oldPhone" v-if="type == 'old'">
                <view class="oldPhone_title">
                    <text class="ft-28 c-66 ">验证当前登录的手机号账号：</text><span class="ft-28 c-33 fw-800">{{ userData.phone
                        }}</span>
                </view>
                <view class="oldPhone_Item mt-20">
                    <view class="input_bg flex bd-r20">
                        <input v-model="form.oldCode" placeholder="请输入手机验证码" style="font-size: 24rpx;"
                            placeholder-class="input-placeholder" />
                        <image class="icon_samll ml-4" src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png"
                            mode="aspectFit" @click="clear('oldCode')">
                        </image>
                    </view>
                    <view class="code_btn" @click="getCodeBnt()">
                        <span v-if="time > 0">({{ time }})</span>
                        获取验证码
                    </view>
                </view>
                <view class="next_btn mt-60" @click="nextBtn()">
                    下一步
                </view>
            </view>


            <view class="newPhone" v-else>
                <view class="newPhone_title">
                    <text class="ft-28 c-66 ">请输入新的关联手机号</text>
                </view>
                <view class="newPhone_num mt-20">
                    <view class="quhao fw-800 flex mr-10" @click="openPhone">
                        +{{ form.areaCode }}
                        <image class="icons" src="https://cdn.oss.bon-top.cn/static_bc/images/icon15.png"
                            mode="aspectFit" />

                    </view>
                    <!-- <input v-model="form.phone" placeholder="请输入手机验证码" style="font-size: 24rpx;"
                        placeholder-class="input-placeholder" /> -->
                    <view class="input_bg flex bd-r20">
                        <input v-model="form.phone" placeholder="请输入手机号" style="font-size: 24rpx;"
                            @blur="blur(form.phone)" placeholder-class="input-placeholder" />
                        <image class="icon_samll ml-4" src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png"
                            mode="aspectFit" @click="clear('phone')">
                        </image>
                    </view>


                </view>
                <view class="ft-22 ml-10 mt-10" style="color:#FF0000" v-show="!phonemsg">请输入正确手机号</view>
                <view class="newPhone_Item mt-20">
                    <view class="input_bg flex bd-r20">
                        <input v-model="form.code" placeholder="请输入手机验证码" style="font-size: 24rpx;"
                            placeholder-class="input-placeholder" />
                        <image class="icon_samll ml-4" src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png"
                            mode="aspectFit" @click="clear('code')">
                        </image>
                    </view>
                    <view class="code_btn" @click="getNewCode()">
                        <span v-if="time2 > 0">({{ time2 }})</span>
                        获取验证码
                    </view>
                </view>
                <view class="next_btn mt-60" @click="confimEditPhone()">
                    确认提交
                </view>
            </view>

        </view>
    </view>
    <!-- 删除弹窗 -->
    <view class="delete_box" ref="diaLogPop" v-if="show">
        <view class="bg"></view>
        <view class="delete_model bd-r40">
            <view class="ft-32 c-33 fw-800 mt-30">{{ '更换提醒' }}</view>
            <view class="c-66 ft-28 text pd-30">
                关联手机号 <span class="c-33 fw-800">{{ userData.phone }}</span> 更换为 <span class="c-33 fw-800">{{
                    form.phone
                    }}</span>，确定后只可以使用新手机号登录。


            </view>
            <view class="btn_model flex-eve">
                <view class="btn" @click="cancel">取消</view>
                <view class="btn sunbmit" @click="confirm()">确定</view>
            </view>
        </view>
    </view>
    <!-- 区号 -->
    <u-popup :show="showPup" @close="closePopup" :round="20">
        <!-- 弹窗标题与关闭按钮 -->
        <view class="popup-header">
            <text @click="closePopup">取消</text>
            <text @click="submit">确定</text>
        </view>
        <picker-view :indicator-style="`height:50px;`" :value="phoneIndex" @change="bindPickerChange"
            class="picker-view">
            <picker-view-column style="height: 100%;">
                <view class="item" v-for="(item, index) in phoneCode" :key="index">
                    {{ item.name }}
                </view>
            </picker-view-column>
        </picker-view>
    </u-popup>

</template>
<script setup lang="js">
import comHead from '@/components/comHead.vue';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
let datasObj = reactive({
    title: '更换关联手机号',
    img: '',
    color: '#FFFFFF',
    direction: '',
    scrollTop: 0,
    noBack: false,
    height: 88
})
const form = ref({
    areaCode: '',
    oldPhone: '',
    phone: '',
    oldCode: '',
    code: ''
})
const phonemsg = ref(true)
const blur = (phone) => {
    phonemsg.value = /^1[3-9]\d{9}$/.test(phone)

}
//验证手机号 2
const editNewPhone = (types) => {

    utils.request(api.editNewPhone, { code: form.value.code, phone: form.value.phone }, 'post').then(res => {
        console.log('res', res)
        if (res.code == 200) {
            userData.value.type = 'old'
            uni.showToast({ title: `手机号修改成功`, icon: 'none' })
            uni.navigateTo({ url: '/subpackage/settings/mySettings' })

        }

    })
}
const confimEditPhone = () => {
    if (!phonemsg.value) return

    if (form.value.code == '' || form.value.phone == '') return uni.showToast({ title: `请输入手机号/验证码`, icon: 'none' })
    openShow()
}
const clear = (key) => {
    form[key] = ''
}
//验证手机号 1
const nextBtn = () => {
    // 输入新号码
    if (form.value.oldCode == '') return uni.showToast({ title: `请输入验证码`, icon: 'none' })
    utils.request(api.verifyChangePhoneCode, { code: form.value.oldCode }, 'post').then(res => {
        if (res.code == 200) {
            userData.value.type = 'new'
            uni.navigateTo({ url: '/subpackage/settings/editPhone?data=' + JSON.stringify(userData.value) })
            uni.showToast({ title: `验证成功`, icon: 'none' })
        }


    })

}
// 获取验证码
const getCodeBnt = () => {
    if (time.value > 0) return uni.showToast({ title: `请${time.value}秒之后获取`, icon: 'none' })
    let _openid = uni.getStorageSync("openid")
    timeOut(1)
    utils.request(api.sendChangePhoneVerifyCode, { openid: _openid }, 'post').then(res => {
        uni.showToast({ title: `验证码发送成功`, icon: 'none' })

        form.value.oldCode = res.data.code

    })
}
// 跟换手机号获取验证码 新手机验证码
const getNewCode = () => {
    if (!phonemsg.value) return

    if (time.value > 0) return uni.showToast({ title: `请${time.value}秒之后获取`, icon: 'none' })
    let _openid = uni.getStorageSync("openid")
    timeOut(2)
    utils.request(api.sendNewPhoneVerifyCode, { openid: _openid, phone: form.value.phone }, 'post').then(res => {
        uni.showToast({ title: `验证码发送成功`, icon: 'none' })
        form.value.code = res.data.code
    })
}
const time = ref(0)
const time2 = ref(0)
const timeOut = (types) => {
    if (types == 1) {
        time.value = 60
        let _time = null
        if (time.value > 0) {
            _time = setInterval(() => {
                time.value--
                console.log('555')
                if (time.value <= 0) {
                    time.value = 0
                    clearInterval(_time)
                }

            }, 1000)
        }
    } else {
        time2.value = 60
        let _time = null
        if (time2.value > 0) {
            _time = setInterval(() => {
                time2.value--
                console.log('555')
                if (time2.value <= 0) {
                    time2.value = 0
                    clearInterval(_time)
                }

            }, 1000)
        }
    }


}
const type = ref('old')




const showPup = ref(false)
const phoneIndex = ref(0)
const bindPickerChange = (e) => {
    phoneIndex.value = e.detail.value

}
// 确认选择
const submit = () => {
    const selected = phoneCode[phoneIndex.value].code;
    form.value.code = selected

    closePopup();
};
const openPhone = () => {
    showPup.value = !showPup.value
}
// 关闭弹窗
const closePopup = () => {
    showPup.value = !showPup.value


};
const show = ref(false)
const confirm = () => {
    editNewPhone()

}
const openShow = () => {
    show.value = !show.value
}
const cancel = () => {
    show.value = !show.value
}
const userData = ref({})

const phoneCode = reactive([{
    name: '中国大陆+86',
    code: 86
},
{
    name: '中国香港+852',
    code: 852
},
{
    name: '中国澳门+853',
    code: 853
},
{
    name: '中国台湾+886',
    code: 886
},
])
onLoad((option) => {
    let _option = JSON.parse(option.data)
    console.log(_option)
    userData.value = _option
    type.value = userData.value.type
    console.log(userData.value)

})
</script>
<style lang="scss" scoped>
/* 头部与关闭按钮 */
.popup-header {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #eee;
    font-size: 28rpx;
}

.picker-view {
    width: 100%;
    height: 400rpx;
    margin-top: 20rpx;

    .item {
        line-height: 100rpx;
        text-align: center;


    }


}

.content_box {
    border-top: 2rpx solid #F1F1F1;

    .oldPhone {
        .oldPhone_Item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            // background-color: cadetblue;


        }


    }

    .input_bg {
        flex: 1;
        background-color: #F8F8F8;
        padding: 20rpx;
        margin-right: 20rpx;

        input {
            flex: 1;
            margin-right: 20rpx;
        }
    }

    .code_btn {
        width: 196rpx;
        height: 78rpx;
        line-height: 78rpx;
        text-align: center;
        font-size: 24rpx;
        color: #333333;
        background: #DBF046;
        border-radius: 20rpx;
    }

    .next_btn {
        color: #DBF046;
        width: 100%;
        height: 78rpx;
        text-align: center;
        line-height: 78rpx;
        background: #333333;
        border-radius: 20rpx;

    }

    .newPhone {
        .newPhone_num {
            padding-left: 20rpx;
            font-size: 24rpx;
            height: 78rpx;
            background-color: #F8F8F8;
            display: flex;
            align-items: center;
            border-radius: 20rpx;

            .quhao {
                height: 100%;

                .icons {
                    width: 34rpx;
                    height: 20rpx;
                    margin-top: 4rpx;
                }

            }

            :deep(.uni-input) {
                font-size: 24rpx;
                color: #666;
                flex: 1;
            }
        }

        .newPhone_Item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            // background-color: cadetblue;

            .input_bg {
                flex: 1;
                background-color: #F8F8F8;
                padding: 20rpx;
                margin-right: 20rpx;

                input {
                    flex: 1;
                    margin-right: 20rpx;
                }
            }

        }
    }

}

.btn_box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #F8F8F8;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

    .center {
        width: 100%;
        text-align: center;
    }

    .btn_left {
        width: 132rpx;
        height: 54rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        line-height: 54rpx;
        text-align: center;
    }

    .btn {
        width: 192rpx;
        height: 78rpx;
        background: #F1F1F1;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        text-align: center;
        line-height: 78rpx;
        font-size: 28rpx;

    }

    .box {
        padding: 20rpx 30rpx 0;
        box-sizing: border-box;
        height: 98rpx;


        .add {
            width: 100%;
            color: #DBF046;
            background-color: #333333;
        }

    }
}

.delete_box {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;


    .bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: #000;
        opacity: 0.5;
        top: 0;
        left: 0;
    }

    .delete_model {
        position: absolute;
        background-color: #fff;
        text-align: center;
        width: 518rpx;
        // height: 386rpx;
        top: calc(50% - (386rpx / 2));
        left: calc(50% - (518rpx / 2));

        .text {
            // padding: 20rpx;
            min-height: 140rpx;
        }

        .btn_model {
            margin-bottom: 30rpx;

            .btn {
                width: 184rpx;
                height: 80rpx;
                line-height: 80rpx;
                border-radius: 20rpx;
                font-size: 28rpx;
                color: #333;
                background-color: #F8F8F8;
            }

            .sunbmit {
                background-color: #333;
                color: #DBF046;
            }
        }
    }

}
</style>